/**
 * 学习目标：掌握插值表达式 - 引用数据类型
 * 语法： {表达式}
 *
 * 表达式特点： 可以放在=右边
 * 种类： 变量
 * 基础数据类型： string number boolean undefined  null
 * 引用数据类型：  object  array ，function
 */
import React from 'react';
import ReactDOM from 'react-dom';

const person = {
  type: 'div',
  name: '芜湖',
  gender: '男',
};

// 万物皆对象
function fn() {
  return 'hello React';
}

const list = [1, 2, 3];
const list2 = [<div>1</div>, <b>2</b>, <i>3</i>];
const divNode = (
  <div>
    {/*  💥 对象不允许放在插值表达式中, 会直接报错 */}
    {/* <h1>{person}</h1> */}

    {/* 💥 array允许放在插值表达式中, 会把数组内的每个元素, 当做一个个节点，虚拟dom渲染出来 */}
    <h2>{list}</h2>
    <h3>123</h3>
    <h4>{list2}</h4>

    {/* 💥 函数本身也属于对象， 函数本身不能放在{}中， 👍函数的调用往往可以 */}
    <h5>{fn()}</h5>
    {/*❌ 函数本身不能放{}中，  */}
    {/*❌ <h6>{fn}</h6> */}
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
